/**
这儿关于地图我得说两句，就是地图的全局对象的问题！
附上官网的链接：https://lbs.amap.com/api/javascript-api/guide/abc/prepare
官网上说把  【在页面添加 JS API 的入口脚本标签，并将其中「您申请的 key 值」替换为您刚刚申请的 key；】
<!--<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>-->
这个在普通的网页文件中放的位置自然无需多说！但是在一些框架的项目中放的位置就得说清楚一点了！就拿这个Vue项目来说！放在public下面的index.html是没有问题的！但是在组件中如何使用呢？!这得借助一个
*/
<template>
  <div class="p1"  >
    <el-card>
      <el-cascader
        class="cascader"
        placeholder="请选择你要查询的地点"
        v-model="value"
        :options="options"
        ref="cascader"
        :props="props"
        @change="handleChange"
        @blur="handleBlur"
        clearable
      ></el-cascader>
    </el-card>

    <!--    // 地图的根元素！-->
    <div id="container" class="map" v-loading="loading"></div>

    <!--    正常的弹出框！ -->
    <el-dialog
      title="拜访信息上传"
      :visible.sync="dialogVisibleUploadVisitPersonInfomations"
      width="400px"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="是否启用钉钉" prop="xialaValue">
          <!--      用户是否启用了钉钉 ！ -->
          <el-select
            class="margin_b"
            v-model="ruleForm.xialaValue"
            placeholder="是否启用钉钉"
            @change="getSelectChangeResult"
          >
          </el-select>
        </el-form-item>
        <el-form-item label="拜访结果" prop="visitResult">
          <!--        // 地推结果-->
          <el-input
            class="margin_b"
            placeholder="请输入拜访结果"
            v-model="ruleForm.visitResult"
            @input="saveDefaultVisitResult"

          >
          </el-input>
        </el-form-item>
        <el-form-item label="备注信息" prop="remark">
          <!--      // 备注信息-->
          <el-input
            class="margin_b"
            type="textarea"
            :rows="2"
            placeholder="请输入备注内容"
            v-model="ruleForm.remark"
            @input="handleRemarkChange"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleCancelEvent">取 消</el-button>
        <el-button type="primary" @click="confirmUploadVisitPersonParameters"
        >确 定</el-button
        >
      </span>
    </el-dialog>

    <!--    默认窗体的弹出框!-->
    <el-dialog
      title="拜访信息上传"
      :visible.sync="defaultDialogVisibleUploadVisitPersonInfomations"
      width="400px"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="是否启用钉钉" prop="xialaValue">
          <!--      用户是否启用了钉钉 ！ -->
          <el-select
            class="margin_b"
            placeholder="是否启用钉钉"
            v-model="ruleForm.xialaValue"
            @change="getSelectChangeResult"
          >
            <el-option
              v-for="item in ruleForm.dingdingSolution"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="拜访结果" prop="visitResult">
          <!--        // 地推结果-->
          <el-input
            class="margin_b"
            placeholder="请输入拜访结果"
            v-model="ruleForm.visitResult"
            @input="saveDefaultVisitResult"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="备注信息" prop="remark">
          <!--      // 备注信息-->
          <el-input
            class="margin_b"
            type="textarea"
            :rows="2"
            placeholder="请输入备注内容"
            v-model="ruleForm.remark"
            @input="handleRemarkChange"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="defaultDialogVisibleCancelEvent">取 消</el-button>
        <el-button
          type="primary"
          @click="defaultConfirmUploadVisitPersonParameters"
        >确 定</el-button
        >
      </span>
    </el-dialog>

    <!--    新增公司信息弹出框！ -->
    <el-dialog
      title="新增公司信息"
      :visible.sync="addInfoDialogVisible"
      @closed="handleAddBeforeClose"
      width="390px"
    >
      <div class="addCompanyClass">
        <el-form :model="addInfoForm" :rules="addInfoRules" ref="addInfoForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="公司名称" prop="companyName">
            <el-input v-model="addInfoForm.companyName"></el-input>
          </el-form-item>
          <el-form-item label="法人" prop="legalPerson">
            <el-input v-model="addInfoForm.legalPerson"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phoneNumber">
            <el-input v-model="addInfoForm.phoneNumber"></el-input>
          </el-form-item>
          <el-form-item label="所属行业" prop="industryInvolved">
            <el-input v-model="addInfoForm.industryInvolved"></el-input>
          </el-form-item>

          <el-form-item label="是否启用钉钉"

          >
            <!--      用户是否启用了钉钉 ！ -->
            <el-select
              class="margin_b"
              v-model="ruleForm.xialaValue"
              placeholder="是否启用钉钉"
              @change="getSelectChangeResult"
            >
              <el-option
                v-for="item in ruleForm.dingdingSolution"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="省/市/区"
          >
            <el-cascader
              placeholder="请选省/市/区"
              v-model="value2"
              :options="options2"
              :props="props"
              @change="handleAddCascaderChange"
              clearable
            >
            </el-cascader>
          </el-form-item>

          <el-form-item label="详细地址" prop="address">

            <el-input placeholder="请输入街道 详细地址" v-model="addInfoForm.address"></el-input>
          </el-form-item>

          <el-form-item
            label="上传时间"
          >
            <!--                      start-placeholder="开始日期"
            -->
            <el-date-picker
              v-model="addInfoForm.visitTime"
              size="small"
              style="width: 200px"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
              range-separator="-"
            ></el-date-picker>
          </el-form-item>


          <el-form-item label="备注" prop="remark">
            <el-input v-model="addInfoForm.remark"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="cancelAdd">取 消</el-button>
    <el-button type="primary" @click="confirmAdd">确 定</el-button>
  </span>
      </div>
    </el-dialog>
  </div>

</template>


<script>
import { requestDataOfDrawPoint, uploadNewCustomerInfo } from '@/api/system/map'
import MapLoader from '@/assets/js/AMap.js'
import { cityInfo } from '@/mixins/cityInfo'
import axios from 'axios'

export default {
  name: 'index',
  data() {
    // 验证手机号的规则
    let checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

      if (regMobile.test(value)) {
        return cb()
      }

      cb(new Error('请输入合法的手机号'))
    }
    return {
      // 加载列表时候的那个加载圈！也就是那个转圈效果！
      loading: true,
      // 地图自定义点的保存对象！
      customizeL: {},
      // 上传公司信息规则
      addInfoRules: {
        companyName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        legalPerson: [
          { required: true, message: '请输入法人名称', trigger: 'blur' }
        ],
        phoneNumber: [
          { required: true, message: '请输入联系人电话', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ],
        industryInvolved: [
          { required: true, message: '请输入公司所属行业', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '请输入备注信息', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '请输入备注信息', trigger: 'blur' }
        ],
        county: [
          { required: true, message: '请输入备注信息', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入街道、详细地址，否则上传的点将不生效！', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入备注信息', trigger: 'blur' }
        ]
      },
      // 控制新增公司信息弹出框的隐藏与显示
      addInfoDialogVisible: false,
      // 新增公司信息上传的参数
      addInfoForm: {
        companyName: 'lvhanghmm',
        legalPerson: 'lvhanghmm',
        phoneNumber: 15523352161,
        // 所属行业
        industryInvolved: '冶金',
        province: '广东',
        city: '深圳市',
        county: '宝安区',
        address: '航城街道',
        remark: 'lvhanghmm',
        // 经度
        latitude: '',
        // 纬度
        longitude: '',
        isVisit: '1',
        visitPerson: window.localStorage.getItem('username'),
        visitTime: '',
        isStart: '0'

        /**
         *
         *
         companyName: 'lvhanghmm',
         legalPerson: 'lvhanghmm',
         phoneNumber: 15523352161,
         // 所属行业
         industryInvolved: '冶金',
         province: '广东',
         city: '深圳市',
         county: '宝安区',
         address: '龙华街道',
         remark: 'lvhanghmm',
         // 经度
         latitude: '',
         // 纬度
         longitude: '',
         isVisit: '1',
         visitPerson: window.localStorage.getItem('username'),
         visitTime: '',
         isStart: '0'
         *
         *
         companyName: '',
         legalPerson: '',
         phoneNumber: '15523352161',
         // 所属行业
         industryInvolved: '',
         province: '',
         city: '',
         county: '',
         address: '',
         remark: '',
         // 经度
         latitude: '',
         // 纬度
         longitude: '',
         isVisit: '1',
         visitPerson: window.localStorage.getItem('username'),
         visitTime: '',
         isStart: '0'

         */
      },

      // 拜访信息弹框的默认数据
      ruleForm: {
        // 下拉单选的value值！
        xialaValue: '启用',
        // 是否启用钉钉
        dingdingSolution: [
          {
            value: '0',
            label: '启用'
          },
          {
            value: '1',
            label: '未启用'
          }
        ],
        // 备注信息【无效！】
        remark: '',
        // 拜访结果【无效！】
        visitResult: ''
      },
      // 弹出框规则【默认弹出框加上常规弹出框！】
      rules: {
        visitResult: [
          { required: true, message: '请输入拜访结果', trigger: 'blur' },
          {
            min: 3,
            max: 50,
            message: '长度不能小于三个字符',
            trigger: 'blur'
          }
        ],
        remark: [
          { required: true, message: '请输入拜访备注', trigger: 'blur' },
          {
            min: 3,
            max: 1000,
            message: '长度在 3 个字符以上',
            trigger: 'blur'
          }
        ]
      },
      // 控制默认的弹出框的显示与隐藏！
      defaultDialogVisibleUploadVisitPersonInfomations: false,
      cityInfo: cityInfo,
      // 这个是级联选择器的触发方式!和一些常规配置
      props: {
        expandTrigger: 'hover'
      },
      // 这个是常规描点上传参数！
      params: {
        province: '',
        county: '',
        city: '',
        address: ''
      },
      // 这个是默认描点上传参数!
      DefaultParams: {
        province: '',
        city: '',
        county: '',
        address: ''
      },
      // 这个是拜访人员上传的携带参数！
      uploadPersonInformationParameters: {
        id: '',
        isVisit: '1',
        visitPerson: window.localStorage.getItem('username'),
        isStart: '0'
      },
      // 保存所有的经纬度
      alljingweidu: [],
      // 级联选择器的数据
      options: [],
      // 暂时无效哦！
      options2: [],
      value: ['440000', '440300', '440306', '113.853,22.6071'],
      // 暂时无效哦！
      value2: [],
      // 控制拜访人员常规弹出框！
      dialogVisibleUploadVisitPersonInfomations: false,
      // 文本域的数据绑定值
      textarea: '',
      // 级联数据的value组成的级数数组
      node: [],
      // 暂时无校
      idnex1: 0
      // 好像是地图的数据内容？！
      // marker: {}
    }
  },
  async created() {
    // 在地图描点网页打开时，初始化地图
    this.initializationMap()

    // 遍历出级联的数据
    this.traverseDataOfCascaded()

    // 获取级联选择框的默认值
    this.getDefaultValueOfCascader()

    // 发起默认描点数据请求 + 开始默认描点 + 点击弹出弹出信息窗体
    this.infoWindow()
    // 当前登录人员的用户名
    // console.log(this.uploadPersonInformationParameters.visitPerson)
  },
  methods: {

    // 添加自定义公司地址级联选择框的内容改变事件！
    handleAddCascaderChange(node) {
      this.addInfoForm.province = node[0].slice(0, node[0].indexOf('省'))
      this.addInfoForm.city = node[1]
      this.addInfoForm.county = node[2]
    },
    // 添加自定义公司信息弹出框关闭之前的回调！
    handleAddBeforeClose(e) {
      this.cancelAdd()
      this.cancelAdd()
    },
    // 取消新增公司
    cancelAdd() {
      this.addInfoDialogVisible = false
      MapLoader().then(AMap => {
        this.res2.remove(this.customizeL)
      })
      MapLoader().then(AMap => {
        this.res2.remove(this.customizeL)
      })
      this.$refs['addInfoForm'].resetFields()


    },
    // 确认新增公司信息
    confirmAdd() {
      this.$refs['addInfoForm'].validate(async(val) => {
        if (val) {
          uploadNewCustomerInfo(this.addInfoForm).then(res => {
            console.log(res)
          })

          this.addInfoDialogVisible = false

          this.$refs['addInfoForm'].resetFields()

          if (this.params.address) {
            console.log('非默认页面自定义点!', 123)

            this.initializationMap()
            this.handleChange()
            this.handleChange()

          } else {
            this.initializationMap()

            this.infoWindow()

            this.initializationMap()

            this.infoWindow()
          }

        } else {
          this.msgError('请完善提交信息')
          return false
        }
      })

    },
    // 临时方法
    tempMethods() {
      MapLoader().then((AMap) => {
        let map2 = this.res2

        //为地图注册click事件获取鼠标点击出的经纬度坐标
        let that = this
        map2.on('click', function(e) {
          // 打印我们点击地图上的经纬度！
          // console.log( e.lnglat.getLng() + ',' + e.lnglat.getLat())

          that.addInfoForm.longitude = e.lnglat.getLng()
          that.addInfoForm.latitude = e.lnglat.getLat()
          const customize = new AMap.Marker({
            map: map2,
            position: [e.lnglat.getLng(), e.lnglat.getLat()]
          })

          // console.log('自定义点！', customize)

          that.customizeL = customize

          that.addInfoDialogVisible = true
        })
      })
    },
    // 初始化地图
    initializationMap() {
      this.loading = true
      MapLoader().then(async(AMap) => {
        const res = new AMap.Map('container', {
          resizeEnable: true
        })
        this.res2 = res
      })
      this.loading = false
    },
    // 遍历级联的数据
    traverseDataOfCascaded() {
      const info = this.cityInfo
      // console.log('遍历级联的数据', info)
      this.options = info.map((v) => ({
        value: v.adcode,
        label: v.name,
        children: v.districts.map((v2) => ({
          value: v2.adcode,
          label: v2.name,
          children: v2.districts.map((v3) => ({
            value: v3.adcode,
            label: v3.name,
            children: v3.districts.map((v4) => ({
              value: v4.center,
              label: v4.name
            }))
          }))
        }))
      }))

      // 新增自定义公司的级联数据
      this.options2 = info.map((v) => ({
        value: v.name,
        label: v.name,
        children: v.districts.map((v2) => ({
          value: v2.name,
          label: v2.name,
          children: v2.districts.map((v3) => ({
            value: v3.name,
            label: v3.name
          }))
        }))
      }))
    },

    // 获取级联选择框的默认值(有缺陷，是写死的！)也就是是非动态的！
    getDefaultValueOfCascader() {
      const jie = this.cityInfo

      for (let i = 0; i < jie.length; i++) {
        if (jie[i].adcode === '440000') {
          // console.log(jie[i].name)
          this.DefaultParams.province = jie[i].name
        }
        for (let j = 0; j < jie[i].districts.length; j++) {
          if (jie[i].districts[j].adcode === '440300') {
            // console.log(jie[i].districts[j].name)
            this.DefaultParams.city = jie[i].districts[j].name
          }
          for (let q = 0; q < jie[i].districts[j].districts.length; q++) {
            if (jie[i].districts[j].districts[q].adcode === '440306') {
              // console.log(jie[i].districts[j].districts[q].name)
              this.DefaultParams.county = jie[i].districts[j].districts[q].name
            }
            for (
              let z = 0;
              z < jie[i].districts[j].districts[q].districts.length;
              z++
            ) {
              if (
                jie[i].districts[j].districts[q].districts[z].center ===
                '113.853,22.6071'
              ) {
                // console.log(jie[i].districts[j].districts[q].districts[z].name)
                this.DefaultParams.address =
                  jie[i].districts[j].districts[q].districts[z].name
              }
            }
          }
        }
      }
    },

    // 发起默认描点数据请求 + 开始默认描点 + 点击弹出弹出信息窗体
    infoWindow: function() {
      MapLoader().then(async(AMap) => {

        this.loading = true
        this.tempMethods()

        this.DefaultParams.province = this.DefaultParams.province.slice(0, 2)

        const jieguo = await requestDataOfDrawPoint(this.DefaultParams)

        this.alljingweidu = jieguo.rows
        // console.log(this.alljingweidu)

        let flag = false
        MapLoader().then((AMap) => {
          let that = this

          try {
            // 默认窗体打开事件
            window.handleOpenDefaultDialog = () => {
              // console.log(that)
              that.defaultDialogVisibleUploadVisitPersonInfomations = true
            }
          } catch (e) {
            console.log(
              'window全局下的handleOpenDefaultDialog方法爆出的异常！',
              e
            )
          }

          // 信息窗体代码区域
          this.alljingweidu.forEach(function(marker) {
            const content = []
            content.push(`<p> 公司名称：${marker.companyName}</p>`)
            content.push(`<p>法人：${marker.legalPerson}</p>`)
            content.push(`<p>联系电话：${marker.phoneNumber}</p>`)
            content.push(`<p>公司地址：${marker.address}</p>`)
            content.push(`<style>

.button {
 background-color: rgb(24,144,255); /* Green */
   border: none;
       color: white;
           padding: 10px 20px;
           text-align: center;
              text-decoration: none;
                 display: inline-block;
                   font-size: 16px;
                      margin: 4px 2px;
                        -webkit-transition-duration: 0.4s; /* Safari */
                          transition-duration: 0.4s;
                             cursor: pointer;
                             }
                              .button1 {
                                 background-color: white;
                                    color: black;
                                        border: 2px solid rgb(24,144,255);
                                        }
                                        .button1:hover {
                                          background-color: rgb(24,144,255);
                                             color: white;
                                             }

</style>`)
            content.push(` <button class="button button1" onclick="handleOpenDefaultDialog()">上传拜访信息</button>`)

            const customCInfo = []
            customCInfo.push(`
            <div style="
              /*width: 330px;*/
              /*height: 100%;*/
              /*background-color: #b3b3b3;*/
              /*border-radius: 10px;*/
            ">
                <p>公司名称：${marker.companyName}</p>
                <p>法人：${marker.legalPerson}</p>
                <p>联系电话：${marker.phoneNumber}</p>
                <p>公司地址：${marker.province + ' - ' + marker.city + ' - ' + marker.county + ' - ' + marker.address}</p>
                <p>拜访人：${marker.visitPerson}</p>
                <p>拜访时间：${marker.visitTime}</p>
                <p>拜访备注：${marker.remark}</p>
</div>
            `)

            // 默认描点!
            // 0 就是没有拜访过的！ 1 就是拜访过的！
            if (marker.isVisit === '0') {
              const markers = new AMap.Marker({
                map: that.res2,
                // icon: '',
                position: [marker.longitude, marker.latitude],
                offset: new AMap.Pixel(-10, 34)
              })
              // 鼠标点击marker弹出自定义的信息窗体
              AMap.event.addListener(markers, 'click', function(e) {
                // console.log(marker.companyName)
                console.log('aslhciasuhcs', marker)

                const infoWindow = new AMap.InfoWindow({
                  autoMove: true,
                  avoid: [20, 20, 20, 20],
                  closeWhenClickMap: true,
                  offset: new AMap.Pixel(-2, 37),
                  anchor: 'bottom-left',
                  // isCustom: true,
                  content: content.join('')
                })

                // 将点击的公司信息的ID保存下来作为拜访信息的参数
                that.uploadPersonInformationParameters.id = marker.id
                // 在地图上打开信息窗体
                infoWindow.open(that.res2, [marker.longitude, marker.latitude])
              })
            } else if (marker.isManual === '1') {
              /**
               @Excel(name = "是否手动新增")
               private String isManual;
               0: 批量导入
               1：手动新增
               */
              const markers = new AMap.Marker({
                map: that.res2,
                // 自己制作 的 红色的点
                icon: 'https://z3.ax1x.com/2021/09/08/h7k3F0.png',
                // 自己制作的绿色的颜色点！
                // icon: 'https://z3.ax1x.com/2021/09/07/hIx7WR.png',
                // 默认地图的那个颜色点！
                // icon: 'https://z3.ax1x.com/2021/08/17/fhRZ7T.png',
                position: [marker.longitude, marker.latitude]
              })

              // that.visitTime = marker.visitTime.slice(
              //   0,
              //   marker.visitTime.indexOf('T')
              // )

              // 鼠标点击marker弹出自定义的信息窗体
              AMap.event.addListener(markers, 'click', function(e) {
                console.log(marker)
                const infoWindow = new AMap.InfoWindow({
                  autoMove: true,
                  avoid: [20, 20, 20, 20],
                  closeWhenClickMap: true,
                  // offset: new AMap.Pixel(-12, 37),
                  // 前面一个参数是控制信息窗口的左右的，后面一个是控制上下的! (10, -10) 倒着的座标系！
                  offset: new AMap.Pixel(10, -30),
                  anchor: 'bottom-left',
                  // anchor: 'top-left',
                  // 是否启用自定义信息窗体!
                  // isCustom: true,

                  content: customCInfo.join('')

                  //   content: `
                  //   <p>拜访时间：${marker.visitTime}</p>
                  // <p>拜访备注：${marker.remark}</p>
                  //   `
                  /**

                   `
                   <p>公司名称：${marker.companyName}</p>
                   <p>法人：${marker.legalPerson}</p>
                   <p>联系电话：${marker.phoneNumber}</p>
                   <p>公司地址：${marker.province + ' - ' +  marker.city + ' - ' + marker.county + ' - ' + marker.address}</p>
                   <p>拜访人：${marker.visitPerson}</p>
                   <p>拜访时间：${marker.visitTime}</p>
                   <p>拜访备注：${marker.remark}</p>`

                   */
                })

                // 将点击的公司信息的ID保存下来作为拜访信息的参数
                that.uploadPersonInformationParameters.id = marker.id
                // 在地图上打开信息窗体
                infoWindow.open(that.res2, [marker.longitude, marker.latitude])
              })

            } else {

              const markers = new AMap.Marker({
                map: that.res2,
                icon: 'https://z3.ax1x.com/2021/08/17/fhRZ7T.png',
                position: [marker.longitude, marker.latitude],
                offset: new AMap.Pixel(-10, 34)
              })

              // that.visitTime = marker.visitTime.slice(
              //   0,
              //   marker.visitTime.indexOf('T')
              // )

              // 鼠标点击marker弹出自定义的信息窗体
              AMap.event.addListener(markers, 'click', function(e) {
                // console.log(e)
                // console.log('已经拜访过的公司！: ', marker.companyName)
                // console.log(marker)
                const infoWindow = new AMap.InfoWindow({
                  autoMove: true,
                  avoid: [20, 20, 20, 20],
                  closeWhenClickMap: true,
                  offset: new AMap.Pixel(-2, 37),
                  anchor: 'bottom-left',
                  // isCustom: true,
                  content: `
                <p>公司名称：${marker.companyName}</p>
              <p>法人：${marker.legalPerson}</p>
              <p>联系电话：${marker.phoneNumber}</p>
              <p>公司地址：${marker.address}</p>
              <p>拜访人：${marker.visitPerson}</p>
              <p>拜访时间：${marker.visitTime}</p>
              <p>拜访备注：${marker.remark}</p>
              `
                })

                // 将点击的公司信息的ID保存下来作为拜访信息的参数
                that.uploadPersonInformationParameters.id = marker.id
                // 在地图上打开信息窗体
                infoWindow.open(that.res2, [marker.longitude, marker.latitude])
              })
            }
          })
        })
        this.loading = false
      })
    },

    // 主动选择相应地点进行描点！（当级联选择框变化的时候触发这个函数）
    async handleChange(node) {
      this.loading = true


      this.tempMethods()
      // node参数是当我们改变级联节点的内容时，级联数据的value组成的级数【一共有四级所以就返回四个元素】数组 【其实你选择几级就返回几个元素】 栗子：["410000", "410300", "410324", "111.554,33.8397"]

      // 将node中形参的内容保存下来！
      // this.node = node

      // 获取级联选择框内容变化后数组对象【我们可以通过它来获取到你选择的级联数据的值“是一个数组” 栗子：（["河南省", "洛阳市", "栾川县", "石庙镇"]）】,也可以拿到上面数组对应的value值！栗子：（ ["410000", "410300", "410324", "111.554,33.8397"]）

      const checkedNodes = this.$refs['cascader'].getCheckedNodes()

      console.log(checkedNodes)

      // 要拿到["河南省", "洛阳市", "栾川县", "石庙镇"]这个你得打印【checkedNodes[0].pathLabels]
      // console.log(checkedNodes[0].pathLabels);

      // 要拿到["410000", "410300", "410324", "111.554,33.8397"]这个你得打印【checkedNodes.[0].path]
      // console.log(checkedNodes[0].path);

      // 拿到级联选择框选中的省市区数组作为参数来请求描点的数据！
      let ProvincialCityStreet = checkedNodes[0].pathLabels

      // 这个地方操作是为了把拿到的级联内容数组中的第一个元素中的“省”字去掉【没有就保留原数组不变！】
      // 为什么我要进行这一步呢？！因为和我对接的后台传递的省份是不带“省”字的，所以得把它截取掉【这儿其实就是一个if判断，但是我为什么要写成三元表达式呢！？！answer：装杯！】
      ProvincialCityStreet[0].indexOf('省') === 2
        ? (ProvincialCityStreet[0] = ProvincialCityStreet[0].slice(0, 2))
        : (ProvincialCityStreet = ProvincialCityStreet)

      // 发起请求描点的参数
      this.params = {
        province: ProvincialCityStreet[0],
        city: ProvincialCityStreet[1],
        county: ProvincialCityStreet[2],
        address: ProvincialCityStreet[3]
      }

      // 发起请求【利用async/await简化异步操作】
      const jieguo = await requestDataOfDrawPoint(this.params)

      // 将返回回来的描点信息保存到本地变量上！
      this.alljingweidu = jieguo.rows

      // 描点的就绪工作
      MapLoader().then((AMap) => {

        // 将这个作用域的this保存下来！
        let that = this

        // 默认窗体打开事件
        window.noDefaultHandleOpenDialog = () => {
          // console.log(that)
          that.dialogVisibleUploadVisitPersonInfomations = true
        }

        this.alljingweidu.forEach(function(marker) {
          const content = []
          content.push(`<p> 公司名称：${marker.companyName}</p>`)
          content.push(`<p>法人：${marker.legalPerson}</p>`)
          content.push(`<p>联系电话：${marker.phoneNumber}</p>`)
          content.push(`<p>公司地址：${marker.address}</p>`)
          content.push(`<style>

                          .button {
                            background-color: rgb(24,144,255); /* Green */
                            border: none;
                            color: white;
                            padding: 10px 20px;
                            text-align: center;
                            text-decoration: none;
                            display: inline-block;
                            font-size: 16px;
                            margin: 4px 2px;
                            -webkit-transition-duration: 0.4s; /* Safari */
                            transition-duration: 0.4s;
                            cursor: pointer;
                            }
                            .button1 {
                            background-color: white;
                            color: black;
                            border: 2px solid rgb(24,144,255);
                            }
                            .button1:hover {
                            background-color: rgb(24,144,255);
                            color: white;
                            }

                          </style>`)
          content.push(
            ` <button class="button button1" onclick="noDefaultHandleOpenDialog()">上传拜访信息</button>`
          )

          // 选择型的描点!
          if (marker.isVisit === '0') {
            const markers = new AMap.Marker({
              map: that.res2,
              // icon: '',
              position: [marker.longitude, marker.latitude],
              offset: new AMap.Pixel(-20, 34)
            })

            // 用标志位来执行这个循环的次数！
            const infoWindowEvent = {
              uploadVisitRecord: function() {
                that.dialogVisibleUploadVisitPersonInfomations = true
              }
            }

            // 鼠标点击marker弹出自定义的信息窗体
            AMap.event.addListener(markers, 'click', function() {

              const infoWindow = new AMap.InfoWindow({
                autoMove: true,
                avoid: [20, 20, 20, 20],
                closeWhenClickMap: true,
                offset: new AMap.Pixel(-10, 34),

                anchor: 'bottom-left',
                // isCustom: true,
                content: content.join('')
              })

              // 将点击的公司信息的ID保存下来作为拜访信息的参数
              that.uploadPersonInformationParameters.id = marker.id
              // 在地图上打开信息窗体
              infoWindow.open(that.res2, [marker.longitude, marker.latitude])
            })
          } else if (marker.isManual === '1') {

            /**
             @Excel(name = "是否手动新增")
             private String isManual;
             0: 批量导入
             1：手动新增
             */
            const markers = new AMap.Marker({
              map: that.res2,
              icon: 'https://z3.ax1x.com/2021/09/08/h7k3F0.png',
              // icon: 'https://z3.ax1x.com/2021/09/07/hIx7WR.png',
              // icon: 'https://z3.ax1x.com/2021/08/17/fhRZ7T.png',
              position: [marker.longitude, marker.latitude],
              offset: new AMap.Pixel(-10, 34)
            })

            // that.visitTime = marker.visitTime.slice(
            //   0,
            //   marker.visitTime.indexOf('T')
            // )

            // 鼠标点击marker弹出自定义的信息窗体
            AMap.event.addListener(markers, 'click', function(e) {
              const infoWindow = new AMap.InfoWindow({
                autoMove: true,
                avoid: [20, 20, 20, 20],
                closeWhenClickMap: true,
                offset: new AMap.Pixel(-2, 37),
                anchor: 'bottom-left',
                // isCustom: true,
                content: `
                <p>公司名称：${marker.companyName}</p>
              <p>法人：${marker.legalPerson}</p>
              <p>联系电话：${marker.phoneNumber}</p>
              <p>公司地址：${marker.province + marker.city + marker.county + marker.address}</p>
              <p>拜访人：${marker.visitPerson}</p>
              <p>拜访人：${marker.visitTime}</p>
              <p>拜访备注：${marker.remark}</p>
              `
              })

              // 将点击的公司信息的ID保存下来作为拜访信息的参数
              that.uploadPersonInformationParameters.id = marker.id
              // 在地图上打开信息窗体
              infoWindow.open(that.res2, [marker.longitude, marker.latitude])
            })
          } else {
            const markers = new AMap.Marker({
              map: that.res2,
              icon: 'https://z3.ax1x.com/2021/08/17/fhRZ7T.png',
              position: [marker.longitude, marker.latitude],
              offset: new AMap.Pixel(-10, 34)
            })

            // 鼠标点击marker弹出自定义的信息窗体
            AMap.event.addListener(markers, 'click', function() {

              // that.visitTime = marker.visitTime.slice(
              //   0,
              //   marker.visitTime.indexOf('T')
              // )

              const infoWindow = new AMap.InfoWindow({
                autoMove: true,
                avoid: [20, 20, 20, 20],
                closeWhenClickMap: true,
                offset: new AMap.Pixel(-2, 37),
                anchor: 'bottom-left',
                // isCustom: true,
                content: `
                <p>公司名称：${marker.companyName}</p>
              <p>法人：${marker.legalPerson}</p>
              <p>联系电话：${marker.phoneNumber}</p>
              <p>公司地址：${marker.address}</p>
                <p>拜访人：${marker.visitPerson}</p>
              <p>拜访时间：${marker.visitTime}</p>
              <p>拜访备注：${marker.remark}</p>
              `
              })

              // 将点击的公司信息的ID保存下来作为拜访信息的参数
              that.uploadPersonInformationParameters.id = marker.id
              // 在地图上打开信息窗体
              infoWindow.open(that.res2, [marker.longitude, marker.latitude])
            })
          }
        })
        this.loading = false
      })
    },

    // 刷新地图
    freashMap() {
      //
      MapLoader().then(async(AMap) => {
        const res = new AMap.Map('container', {
          resizeEnable: true
        })
        this.res2 = res
      })
    },

    // 当我们每一次选择完级联数据并且级联数据框失去焦点的时候触发这个函数来刷新地图！【其实这个是由于我没有用代码实现清除地图上的点的替代方法！】
    handleBlur() {

      this.freashMap()
    },
    // 上传拜访人员参数！得到响应！
    async confirmUploadVisitPersonParameters() {
      try {
        const { data: res } = await axios.post(
          'http://120.26.39.138:1000/system/adress/edit',
          this.uploadPersonInformationParameters
        )
        if (res.code !== 200) return

        this.dialogVisibleUploadVisitPersonInfomations = false
        this.msgSuccess(res.msg)

        this.freashMap()
        this.handleChange()
        this.$refs.ruleForm.resetFields()

        // this.infoWindow()
      } catch (e) {
        console.log(e)
      }
    },

    // 默认弹出框的确定事件
    async defaultConfirmUploadVisitPersonParameters() {
      try {
        const { data: res } = await axios.post(
          'http://120.26.39.138:1000/system/adress/edit',
          this.uploadPersonInformationParameters
        )
        if (res.code !== 200) return

        this.defaultDialogVisibleUploadVisitPersonInfomations = false
        this.msgSuccess(res.msg)

        this.freashMap()
        this.infoWindow()
        this.$refs.ruleForm.resetFields()
      } catch (e) {
        console.log(e)
      }
    },

    // 获取到拜访信息下拉选框选中的值
    getSelectChangeResult(v) {
      // console.log(window.localStorage.getItem('username'))
      // console.log(v)
      this.uploadPersonInformationParameters.isStart = v
      this.addInfoForm.isStart = v
    },

    // 备注框信息发生变化的时候触发
    handleRemarkChange(e) {
      this.uploadPersonInformationParameters.remark = e
    },

    // 默认显示框取消事件
    defaultDialogVisibleCancelEvent() {
      this.$refs.ruleForm.resetFields()
      this.defaultDialogVisibleUploadVisitPersonInfomations = false
    },

    // 非默认弹框取消按钮事件、
    dialogVisibleCancelEvent() {
      this.$refs.ruleForm.resetFields()
      this.dialogVisibleUploadVisitPersonInfomations = false
    },

    // 保存默认拜访结果的值
    saveDefaultVisitResult() {
      this.uploadPersonInformationParameters.visitResult =
        this.ruleForm.visitResult
    }

  }
}
</script>

<style scoped>
/*新增公司的弹出框的类!*/
.addCompanyClass {
  height: 560px;
}

.map {
  width: 100%;
  height: 900px;
}

.cascader {
  width: 300px;
}

.margin_b {
  margin-bottom: 5px;
}
</style>
